import React, { Component } from "react";
import { Row, Col, Form, Input, Button } from "antd";
import { observer, inject } from "mobx-react";
import "./Login.less";

const FormItem = Form.Item;

export default
@Form.create()
@inject("user")
@observer
class Login extends Component {
  handleSubmit = e => {
    e.preventDefault();
    this.props.history.push('/dashboard/home')
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div className="login-layout-container">
        <div className="login-wrap">
          <div className="login-html">
            <Form onSubmit={this.handleSubmit} className="login-form">
              <Row>
                <Col
                  span={3}
                  style={{
                    fontSize: 24,
                    paddingBottom: 5,
                    margin: "0 15px 10px 0",
                    color:'#fff',
                    borderBottom: "2px solid #1987ee"
                  }}
                >
                  登录
                </Col>
              </Row>

              <Row style={{ paddingTop: 20 }}>
                <span style={{ fontSize: 14, color: "#C0C4CC" }}>用户名</span>
              </Row>
              <Row style={{ paddingTop: 10 }}>
                <FormItem>
                  {getFieldDecorator("userName", {
                    rules: [
                      { required: true, message: "Please input your username!" }
                    ]
                  })(
                    <Input
                      style={{
                        border: "none",
                        padding: "25px 20px",
                        borderRadius: 25,
                        color: "#fff",
                        background: "rgba(255,255,255,.1)"
                      }}
                      placeholder="Username"
                    />
                  )}
                </FormItem>
              </Row>
              <Row style={{ paddingTop: 10 }}>
                <span style={{ fontSize: 14, color: "#C0C4CC" }}>密码</span>
              </Row>
              <Row style={{ paddingTop: 10 }}>
              <FormItem>
                  {getFieldDecorator("password", {
                    rules: [
                      { required: true, message: "Please input your Password!" }
                    ]
                  })(
                    <Input
                    style={{
                      border: "none",
                      padding: "25px 20px",
                      borderRadius: 25,
                      color: "#fff",
                      background: "rgba(255,255,255,.1)"
                    }}
                      type="password"
                      placeholder="Password"
                    />
                  )}
                </FormItem>
              </Row>
              <Row style={{ paddingTop: 20 }}>
                <FormItem>
                  <Button
                    style={{width:"100%",
                    borderRadius: 25,display:"block",height:50}}
                      type="primary"
                      htmlType="submit"
                      size="large"
                      className="login-form-button"
                    >
                      登录
                    </Button>
                  </FormItem>
              </Row>
            </Form>
          </div>
        </div>
      </div>
    );
  }
}